<template>
  <!-- <canvas/> -->
    <canvas ref="layout"></canvas>
</template>
<script>
  export default {
    name: 'canvasSilo',
    props: {
      title: String,
      current: Number,
      run: Number,
      min: Number,
      max: Number,
      full: Number,
    },
    data() {
      return {
        ctx: null,
        layoutCanvas: null,
        height: 140,
        width: 80,
        lineWidth: 2
      }
    },
    computed: {
      percent() {
        let res = (this.full > 0) ? this.current / this.full * 100 : 0
        if (res > 100) res = 100
        return res
      }
    },
    watch: {
      title() {
        this.flushCanvas()
      },
      current() {
        this.flushCanvas()
      },
      run(){
        this.flushCanvas()
      }
    },
    mounted() {
      
      this.layoutCanvas = this.$refs.layout
      let parent = $(this.layoutCanvas).parent()
      this.height = parent.height()
      this.initCanvas(this.$el)
    },
    methods: {
      initCanvas(el) {
        el.width = this.width
        el.height = this.height
        this.ctx = el.getContext('2d')
        this.drawCanvas()
      },
      flushCanvas() {
        this.ctx.clearRect(0, 0, this.width, this.height)
        this.drawCanvas()
      },
      drawCanvas() {
        let centerP = [this.width / 2, 6]

        // this.ctx.strokeStyle = '#41c45d'
          this.ctx.strokeStyle = '#32c5e9'
        if (this.run == 0) {
          // this.ctx.strokeStyle = '#f11818'
          this.ctx.strokeStyle = 'rgba(241, 24, 24, 0.7)'
        }
        if (this.run == 2) {
          // this.ctx.strokeStyle = '#1c84f5'
          this.ctx.strokeStyle = '#ffc37f'
        }
        this.ctx.lineWidth = this.lineWidth
        //边框
        this.ctx.beginPath()
        this.ctx.ellipse(centerP[0], centerP[1], centerP[0] - this.lineWidth / 2, centerP[1] - this.lineWidth / 2, 0, 0, Math.PI * 2)
        this.ctx.moveTo(this.lineWidth / 2, centerP[1])
        this.ctx.lineTo(this.lineWidth / 2, this.height * 3 / 4)
        this.ctx.lineTo(this.width / 2 - this.width / 6, this.height - this.lineWidth)
        this.ctx.lineTo(this.width / 2 + this.width / 6, this.height - this.lineWidth)
        this.ctx.lineTo(this.width - this.lineWidth / 2, this.height * 3 / 4)
        this.ctx.lineTo(this.width - this.lineWidth / 2, centerP[1])
        this.ctx.stroke()

        //填充
        if (this.percent > 0) {
          let offsetHeight = this.height * (1 - this.percent / 100)

          // this.ctx.fillStyle = '#6fe588'
          this.ctx.fillStyle = 'rgba(29, 193, 245, 0.7)'
          if (this.current <= this.min || this.current >= this.max) {
            this.ctx.fillStyle = '#fc6060'
          }
          this.ctx.beginPath()
          if (centerP[1] + offsetHeight < this.height * 3 / 4) {
            this.ctx.moveTo(this.lineWidth, centerP[1] + offsetHeight)
            this.ctx.lineTo(this.lineWidth, this.height * 3 / 4)
            this.ctx.lineTo(this.width / 2 - this.width / 6, this.height - this.lineWidth / 2 * 3)
            this.ctx.lineTo(this.width / 2 + this.width / 6, this.height - this.lineWidth / 2 * 3)
            this.ctx.lineTo(this.width - this.lineWidth, this.height * 3 / 4)
            this.ctx.lineTo(this.width - this.lineWidth, centerP[1] + offsetHeight)
          } else {
            let w = this.width / 2 - this.width / 6
            let h = this.height / 4
            let x = (centerP[1] + offsetHeight - this.height * 3 / 4) * w / h
            this.ctx.moveTo(this.lineWidth + x, centerP[1] + offsetHeight)
            this.ctx.lineTo(this.width / 2 - this.width / 6, this.height - this.lineWidth / 2 * 3)
            this.ctx.lineTo(this.width / 2 + this.width / 6, this.height - this.lineWidth / 2 * 3)
            this.ctx.lineTo(this.width - this.lineWidth - x, centerP[1] + offsetHeight)
          }
          this.ctx.closePath()
          this.ctx.fill()
        }

        if (this.title) {
          // this.ctx.fillStyle = '#000'
          this.ctx.fillStyle = '#fff'
          this.ctx.lineWidth = 2
          this.ctx.font = '13px Arial'
          this.ctx.textAlign = 'center'
          this.ctx.textBaseline = 'middle'
          this.ctx.fillText(this.title.substring(0,this.title.length ), centerP[0], this.height / 2 -5)
          // this.ctx.fillText(this.title.substring(this.title.length/2 + 1,this.title.length), centerP[0], this.height / 2 +10)
        }
      }
    }
  }
</script>
<style scoped>
  canvas {
    display: block;
  }
</style>
